<template>
	<view class="container">
		<!-- 引入公共头部组件 -->
		<!-- 暂时不删除 后续根据需求操作即可 -->
		<!-- 	<HeaderTitle title="报销" rightTextColor="#1959F9" rightContent="发起报销"
			@selectRightIconChange="selectRightIconChange" :isBack="true" :isSearch="false" :isTab="true"
			:currentIndex="currentIndex" :tabsList="tabsList" @tabOnClickItem="onClickItem" /> -->
		<HeaderTitle title="报销" rightTextColor="#1959F9" rightContent="发起报销"
			@selectRightIconChange="selectRightIconChange" :isBack="true" :isSearch="false" />
		<div style="width: 100%;">
			<!-- 搜索区域 -->
			<!-- <div style="position: fixed;width: 99%;background-color: #fff;z-index: 999;">
				<uni-segmented-control :current="currentIndex" :values="tabsList" :style-type="styleType"
					:active-color="'#007aff'" @clickItem="onClickItem" />
			</div> -->
		</div>
		报销页面

		<!-- 顶部弹出层 -->
		<u-popup v-model="showTop" mode="top" :mask='false' border-radius="14">
			<view class="uni-shop-pop">
				<text>功能直达</text>
				<view class="uni-pop-item ">
					这里是里面的内容
					<!-- <view class="uni-pop-img-text flex column Acenter Jcenter" @click="urlPagesChange(1)">
							<image src="../../static/zhuye.png" mode=""></image>
							<text>主页</text>
						</view>
						<view style="margin-left: 20upx;" class="uni-pop-img-text flex column Acenter Jcenter" @click="urlPagesChange(2)">
							<image src="../../../static/product/xieyi.png" mode=""></image>
							<text>协议</text>
						</view>
							 <view style="margin-left: 20upx;" class="uni-pop-img-text flex column Acenter Jcenter" @click="urlPagesChange(3)">
							<image src="../../../static/infor.png" mode=""></image>
							<text>资讯</text>
						</view>
						<view style="margin-left: 20upx;" class="uni-pop-img-text flex column Acenter Jcenter" @click="urlPagesChange(4)">
							<image src="../../../static/product/xiaoxi.png" mode=""></image>
							<text>消息</text>
						</view> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'
	export default {
		components: {
			// 公共头部组件
			HeaderTitle
		},
		data() {
			return {
				// 是否展示顶部弹出层
				showTop: false,
				styleType: 'text', //显示text
				// 标签栏点击的是我的样品还是反馈
				currentIndex: 0,
				tabsList: ['我的发起',
					// '我的待办', '我的经办'
				],
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
			}
		},
		onShow() {

		},
		methods: {
			// 右侧按钮点击
			selectRightIconChange() {
				console.log('右侧按钮点击了')
				// 弹起顶部弹窗
				this.showTop = true
			},
			// tab切换
			// 我的发起导航栏点击事件
			onClickItem(e) {
				console.log('tab切换了', e)
				this.currentIndex = e
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {

		// 弹窗区域
		.uni-shop-pop {
			background-color: #464646;
			padding-left: 20upx;
			padding-top: 30upx;

			//   opacity: 0.5; 
			text {
				&:first-child {
					font-size: 34upx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			.uni-pop-item {
				margin-top: 46upx;
				display: flex;

				.uni-pop-img-text {
					width: 150upx;
					height: 150upx;
					margin-bottom: 18upx;
					background: rgba(0, 0, 0, 0.8);
					border-radius: 10upx;

					image {
						width: 44upx;
						height: 44upx;
					}

					text {
						font-size: 24upx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 40upx;
					}
				}
			}
		}
	}
</style>